<template>
  <!-- 后台数据主体头部 -->
  <div class="homa-top">
    <!-- 循环添加数据模块 -->
    <div class="box" v-for="(item, index) in list" :key="index">
      <i :class="item.icon"></i>
      <div class="son">
        <p>{{ item.title }}</p>
        <span>{{ item.num }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { totaldata } from '@/api/order';

export default {
  data () {
    return {
      // 数据 
      list: [
        {
          title: '总订单',
          num: '102400',
          icon: 'iconfont icon-dingdan',
        },
        {
          title: '总销售额',
          num: '102400',
          icon: 'iconfont icon-xiaoshoue1',
        },
        {
          title: '今日订单数',
          num: '102400',
          icon: 'iconfont icon-jinridingdanshu',
        },
        {
          title: '今日销售额',
          num: '102400',
          icon: 'iconfont icon-xiaoshoue',
        },
      ],
    }
  },
  methods: {
    async getData () {
      let res = await totaldata()
      let { todayOrder,totalAmount,totalOrder,totayAmount } =res.data
      this.list[0].num=totayAmount
      this.list[1].num=totalAmount
      this.list[2].num=todayOrder
      this.list[3].num=totalOrder
      console.log('res :>> ', res);
    }
  },
  created () {
    this.getData();
  },
}
</script>

<style lang="less" scoped>
.homa-top {
  display: flex;
  justify-content: space-around;
  .box {
    width: 22%;
    border-radius: 8px;
    height: 140px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: white;
    .son {
      text-align: center;
      line-height: 30px;
      font-size: 28px;
      p {
        font-size: 24px;
        color: #aaa;
      }
      span {
        font-weight: 600;
      }
    }
  }
}
// 设置iconfont字体颜色
.icon-dingdan {
  color: #38a7e1;
  font-size: 80px;
}
.icon-xiaoshoue1 {
  color: #d31f78;
  font-size: 80px;
}
.icon-jinridingdanshu {
  color: #1195db;
  font-size: 80px;
}
.icon-xiaoshoue {
  color: #18fa27;
  font-size: 80px;
}
</style>